<template>
  <main>
    <div class="am-g">
      <section class="am-u-sm-12 am-u-md-4 am-u-lg-3 dg-work am-margin-bottom"
        v-for='(works, index) in worksData' :key="index"
        @mouseleave="operPanel(works, false)">
        <!-- 图片 -->
        <div class="dg-img">
           <div @click="actionWorksDetail(works.worksID)">
            <am-image custom-class="am-img-responsive am-center"
            :responsive="true" v-lazy="thumbnail + works.mainPic" :src="''" alt="" />
            <div class="dg-blur-img" :style="{'background-image': `url(${ thumbnail + works.mainPic })`}"></div>
           </div>
        </div>
     
        <!-- 详情 -->
        <div class="dg-work-detail am-padding-sm">
          <h2 class="am-inline">{{ works.worksName }}</h2>
          <p class="am-inline am-fr">
            <i class="am-icon-eye">&nbsp;{{ works.clicksNum }}</i>
            <i class="am-icon-thumbs-o-up">&nbsp;{{ works.poll }}</i>
          </p>
        </div>

        <!-- 作者works.isShowPanel -->
        <div class="dg-work-dsg am-padding-xs am-cf">
          <span class="am-fl" @mouseenter="operPanel(works, true)">
            <!-- <img src="/static/2.jpg" class="am-circle am-margin-right-xs" alt=""> -->
            <img v-lazy="static_pic + works.headImagePath" class="am-circle am-margin-right-xs" alt="">
            {{ works.designerName }}
          </span>
          <span class="am-fr am-margin-top-xs" :title="`审核通过时间：${ works.cfmdate } - 创建时间：${ works.createdOn }`">{{ works.TimeDif }}</span>
          <dsg-overview v-if="works.isShowPanel" @operPanel="operPanel(works, false)"
          v-bind="{
            headimgPath: static_pic + works.headImagePath,
            dsgName: works.designerName,
            place: works.provinceName + ' ' + works.cityName,
            worksNum: works.worksNumber,
            storeName: works.storeName
          }" />
        </div>
      </section>

      <div class="am-u-end"></div>
    </div>
    <!--分页组件-->
    <v-pagination :total="total" :current-page='current' @pagechange="pagechange" :display="display"></v-pagination>
  </main>
  
</template>

<script>
import VPagination from '@/dg_components/pagination'
import DsgOverview from '@/dg_components/DsgOverview'

export default {
  name: 'works-list2',
  data() {
      return {
      worksData: [],// 作品数据
      total:0,     // 记录总条数
      display:16,   // 每页显示条数
      current: 1,   // 当前的页数
      typeID:0,
  
    }
  }, 
   components: {
    VPagination, DsgOverview
  },
  computed: {
    /**
     * 筛选面板的条件
     */
    selectGameID() {// 历届赛事
      return this.$parent.$refs.filter.selectGame.ID;
    },
    choicesID() {// 获取选中的分类标签
      return this.$parent.$refs.filter.choices.map(item => item.id);
    },
    sorts() {
      return this.$parent.$refs.filter.sortsIndex;
    },

    /**单一状态 */
    gameID() {
       return this.$store.getters.gameID;
      //return gameID=5;
    }
  },
   methods: {
    ready() {
      this.loadWorks(false);
    },
    actionWorksDetail(onworksID) {
      //console.log("******************"+onworksID);
    this.worksClicks(onworksID);//跳转之前执行点击量增加,执行完后才跳转<code>/cart</code>
    this.$router.push('/worksDetail/'+onworksID)
   },
    //点击量
    worksClicks(onworksID) {
       //console.log("++++++++++++++++++"+onworksID);
      this.dgpost(this.api.CLICKWORKS, {
        worksID: +onworksID,
      }).then(res => {
        this.res.data;
      }).catch(err => {
        this.alertMsg = err.msg;
      });
    },
    loadWorks() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETWORKSLISTBYMPAGE, {
          type : this.typeID,
          tagID: this.choicesID.toString(),
          gameID: +this.selectGameID || '0',
          pageNum:	+this.current,
          numPerPage: +this.display,
        }).then(res => {
          this.worksData = res.data.data.work;

           /**
           * 添加设计师概览显示板属性
           */
          this.worksData.forEach(item => {
            this.$set(item, 'isShowPanel', false);
          });

          this.total=res.data.data.page.total;
          if(this.total === 0) { this.total = 1 }
        });
      });
    },
     pagechange(currentPage){ //分页点击
        this.current = currentPage;
        this.loadWorks();
    },
    /** */
    async goWsDetail(works) {
      await this.$parent.$refs.filter.clearTags();
      this.$route('/worksDetail/' + works.worksID);
    },
    tabchange(tabID) {
      // alert(tabID)
      if(tabID !== this.typeID){
        this.typeID = tabID
        this.loadWorks();
      }
    },

    /**
     * @description - 定时器效果
     * 
     * TODO:
     * - 显示板延时显示
     * - 高频率触发setTimeout会注册多次事件
     */
    operPanel(item, flag = false) {
      item.isShowPanel = flag;
      // if(flag) {
      //   setTimeout(() => {
      //     item.isShowPanel = true;
      //   }, 299);
      // } else {
      //   item.isShowPanel = false;
      // }

    }
  },
   watch: {
    /**筛选条件触发查询 */
    choicesID(val) {
      this.current = 1;
      this.loadWorks();
    },
    selectGameID(val) {
      this.current = 1;
      this.loadWorks();
    },
    // choices: {
    //   handler(val) {
    //     this.page.num = 1;
    //     this.loadWorks(false);
    //   },
    //   deep: true
    // },
    sorts(val) {
      // this.page.num = 1;
      // this.loadWorks(false);
    }
  },
  mounted() {
    this.ready();
  }

}
</script>

<style lang="less" scoped>
@max640: ~"screen and (max-width: 640px)";

@media @max640 {
}


.dg-work {
  img {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
}

.dg-work-detail {
  background-color: #FFFFFF;
  border-bottom: 1px solid rgb(156, 155, 155);
  p {
    margin: 5px 0;
    color: #8A8A8A;
    i {
      padding:0 5px;
    }
  }
}

.dg-work-dsg {
  background-color: #FFFFFF;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  span:last-of-type {
    color: #8A8A8A;
  }
  img {
    max-width: 35px;
    min-height: 35px;
  }
}

.dg-img {
  position: relative;
  img { width: 100%; }
}
// .am-u-md-4{
//    width: 20%;
// }
</style>
